<template>
	<view class="container">
		<my-tabs :tabs="tabs" :current="currentTab" @change="handleTabChange"></my-tabs>

		<scroll-view scroll-y v-if="currentTab === 0" class="scroll-list">
			<house-list :identityOptions="identityOptions" :list="houseList"></house-list>
		</scroll-view>

		<scroll-view scroll-y v-if="currentTab === 1" class="scroll-list">
			<binding-list :list="bindingList"></binding-list>
		</scroll-view>
         <view style="height: 100px;"></view>
		<view class="bottom-button-container">
			<button class="bind-button" @click="handleBind">去绑定房屋</button>
		</view>
	</view>
</template>

<script>
	import myTabs from './components/my-tabs/my-tabs.vue';
	import houseList from './components/house-list/house-list.vue';
	import bindingList from './components/binding-list/binding-list.vue';
	import { getBindInfo } from '@/api/index';
	import {mapState,mapMutations} from 'vuex'
	import ls from '@/util/ls'
	export default {
		components: {
			myTabs,
			houseList,
			bindingList
		},
		data() {
			return {
				
				currentTab: 0,
				tabs: [{
					name: '已绑定',
					count: 0
				}, {
					name: '绑定中',
					count: 0
				}],
				houseList: [],
				bindingList: []
			};
		},
		computed:{ 
			...mapState("community",["communityId","identityOptions"])
		},
		// onLoad(){
		// 	this.init()
		// },
		onShow(){
			this.init()
		},
		methods: {
			...mapMutations("community",["setBoundHouses"]),
			async init(){
				let useinfo=ls.get('user')
				let wxUser=useinfo.wxUser
				let communityId=this.communityId
                let data1=await getBindInfo({
					communityId: communityId,
					liveUserId: wxUser.wxUserId.toString(),
					auditStatus:1
				})
				
				
           
			 let data2=await getBindInfo({
					communityId: communityId,
					liveUserId: wxUser.wxUserId.toString(),
					auditStatus:2
				})
				this.setBoundHouses(data2.rows.length)
				
	          this.bindingList=data1.rows.map(item=>{
				return {
					...item,
					pictureUrl:item.pictureUrl?item.pictureUrl.split(',') : []
				}
			  })
			   this.houseList=data2.rows
				this.tabs= [{
					name: '已绑定',
					count: data2.rows.length
				}, {
					name: '绑定中',
					count: data1.rows.length
				}]
				
			},
			handleTabChange(index) {
				this.currentTab = index;
			},
			handleBind() {
				uni.navigateTo({
					url: '/pages/bindhouse/index'
				})
			}
		}
	}
</script>

<style lang="scss" >
	.container {
		background-color: $uni-bg-color-grey;
		min-height: 100vh;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.scroll-list {
		flex: 1;
		min-height: 0;
	}

	.bottom-button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 40rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
	}

	.bind-button {
		background-color: #4a7cf1;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
</style>